<template lang="html">
  <div id="userManage">
    <app-table :total="total" @fetchData="fetchData">
      <el-col :span="4">
        <el-input v-model="filter.text" placeholder="序号/账户/手机/邮箱"></el-input>
      </el-col>
      <el-select placeholder="状态" v-model="filter.status" clearable>
        <el-option label="有效" value="1"></el-option>
        <el-option label="无效" value="0"></el-option>
      </el-select>
      <div slot="table">
        <el-button size="small" type="info" @click="handleCreate" style="float: right;margin-right:10px">新增</el-button>
        <el-table :data="tableData" border highlight-current-row>
          <el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
          <el-table-column prop="userid" label="客户账号" width="130"></el-table-column>
          <el-table-column prop="username" label="昵称" width="130"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="address" label="地区"></el-table-column>
          <el-table-column label="状态" width="100">
            <template scope="scope">
              <el-tag :type="scope.row.status === '1' ? 'success' : 'default'" close-transition>
                {{scope.row.status === '1' ? '有效' : '无效' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template scope="scope">
              <el-button size="small" type="success" @click="editButton(scope.$index,scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteButton(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </app-table>
    <user-info v-model="diaologViesible" :info="info" @submit="submit"></user-info>
  </div>
</template>
<script>
import AppTable from '../../common/app-table.vue'
import * as User from '../../../api/user.js'
import Config from '../../../config.js'
import UserInfo from './user-info.vue'
import {
  get_filter_params,
  reset_filter_params,
  copy
} from '../../../helpers.js'
export default {
  data: function() {
    return {
      info: null,
      diaologViesible: false,
      input: '',
      datePickerOptions: Config.datePickerOptions,
      filter: {
        status: '',
        text: ''
      },
      total: 10,
      tableData: []
    }
  },
  methods: {
    submit: function(info) {
      if (this.info) {
        copy(info, this.info);
      } else {
        let temp = copy(info)
        this.tableData.unshift(temp);
      }
    },
    // 新增
    handleCreate: function() {
      this.diaologViesible = true;
      this.info = null;
    },
    // 编辑
    editButton: function(index, row) {
      this.diaologViesible = true;
      this.info = row;
    },
    // 删除
    deleteButton: function(index, row) {
      this.$confirm('你正在删除客户[' + row.username + '],是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        User.delUser(row.id).then(data => {
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '操作成功'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作取消'
        })
      })
    },
    fetchData: function(page = Config.page, bFilterReset = false) {
      if (bFilterReset)
        reset_filter_params(this.filter);
      let params = {
        page: page,
        filter: get_filter_params(this.filter)
      };
      User.getTableData(params).then(data => {
        this.total = data.total;
        this.tableData = data.data;
      })
    }
  },
  created: function() {
    this.fetchData();
  },
  components: {
    AppTable,
    UserInfo
  }
}
</script>
<style lang="less">
#userManage {
  margin-top: 20px;
  td {
    text-align: center;
  }
  th {
    text-align: center;
  }
}
</style>
